<template>
  <div
    class="v-shape-font-family"
    style="height: 100%"
  >
    <m-dropdown
      class="g-jc-sb g-pd-lr-7 g-pointer height-100"
      :class="{ 'g-disabled': disabled }"
      style="align-items: center; height: 100%"
      :disabled="disabled"
    >
      <span>
        {{ row.value }}
      </span>
      <img src="statics/images/sidebar/arrowDown.svg" />
      <template #dropdown>
        <m-dropdown-menu-item
          v-for="item in font"
          :key="item.label"
          class="g-jc-sb __format-define g-m-b-4"
          @click="handleClickSelection(item)"
        >
          <span>
            {{ $t(item.label) }}
          </span>
        </m-dropdown-menu-item>
      </template>
    </m-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { font } from "@/modules/model/comps/station/graphTabs/graphEditor/components/basicStyles/formatModel";

import { ShapeStyleValue } from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";

const props = defineProps<{
  row: ShapeStyleValue;
  selected?: boolean;
  configurationDisabled?: boolean;
}>();

const disabled = computed(() => {
  return props.configurationDisabled;
});

const handleClickSelection = item => {
  props.row.value = item.value;
};
</script>

<style lang="scss">
@import "@/assets/css/theme.scss";
.v-shape-font-family {
  .height-100 {
    height: 100%;
  }

  .__format-define {
    height: 24px;
    font-size: 11px;
    font-weight: normal;

    // &:hover {
    //   background-color: $theme-color;
    //   color: #ffffff;
    // }

    .__format-define-size {
      color: #000000;
      opacity: 0.45;
    }

    ._style-set {
      overflow: hidden;
    }
  }
}
</style>
